<template>
  <div class="book-detail-container">
    <div class="book-title">
      <h1>{{ bookDetail.bookName }}</h1>
    </div>
    <el-row :gutter="20">
      <el-col :span="6" class="book-img">
        <div class="block">
          <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
          <el-carousel indicator-position="none">
            <el-carousel-item v-for="(item,index) in bookDetail.bookImgs" :key="index">
              <el-image style="width: 100%; height: 100%" :src="item.imgName">
                <!-- <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>-->
              </el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      <el-col :span="12" class="book-msg">
        <div class="book-prop">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="author">作者：{{ bookDetail.author }}</div>
              <div class="publisher">出版社：{{ bookDetail.publisher }}</div>
              <div class="publish-time">出版时间：未知</div>
              <div class="banci">版次：未知</div>
              <div class="book-isbn">ISBN：未知</div>
            </el-col>
            <el-col :span="12">
              <div class="book-price">定价：￥{{ bookDetail.price }}</div>
              <div class="zhuangzhen">库存：{{ bookDetail.repositoryNum }}</div>
              <div class="kaiben">开本：16开</div>
              <div class="zhizhang">纸张：胶版纸</div>
              <!-- <div class="fenlei">分类：xxxx</div> -->
            </el-col>
          </el-row>
        </div>
        <div class="book-des-container">{{ bookDetail.bookDes }}</div>
      </el-col>
      <el-col :span="6" class="book-category-operation-div">
        <div class="div1">
          <div class="category-title">相关分类</div>
          <hr>
          <div class="category-detail">
            <el-row>
              <el-col
                v-for="(item,index ) in bookDetail.categories"
                :key="index"
                :span="12"
                class="each-category"
              >
                <el-link type="primary" @click="toCategory(item.id)">{{ item.name }}</el-link>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="div2">
          <div class="operation-div">操作</div>
          <hr>
          <div>
            <!-- <el-button size="mini" type="primary">购买</el-button> -->
            <el-button size="mini" type="success" @click="addToCart()">加入购物车</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as common from '@/common/common'
export default {
  data() {
    return {
      imgs: [],
      imgUrl: require('@/assets/logo.png'),
      bookId: '',
      bookForm: {
        type: 1,
        str: '',
        getBooksByCid: true,
        cid: '',
        from: '',
        to: '',
        orderType: 1
      },
      canAdd: true

    }
  },
  computed: {
    bookDetail() {
      return this.$store.getters.bookDetail
    },
    isLogin() {
      return this.$store.getters.isLogin
    },
    userCart() {
      return this.$store.getters.userCart
    },
    userDetail() {
      return this.$store.getters.userDetail
    }
  },
  created() {
    this.getBookDetailById()
  },
  methods: {
    getBookDetailById() {
      //  获取id
      const bookId = this.$route.params.id
      this.bookId = bookId
      // console.log(bookId)
      this.$store.dispatch('book/getBookById', bookId).then(res => {
      })
    },

    toCategory(id) {
      common.initBookPageFormAndSearchBookForm()
      this.bookForm.cid = id
      this.$store.commit('book/SET_SEARCHBOOKFORM', this.bookForm)
      this.$store.dispatch('book/getBooksByCid').then(res => {
        // if (!this.$route.fullPath.includes('/book')) {
        this.$router.push('/book')
        // }
      })
    },
    addToCart() {
      if (this.canAdd) {
        this.canAdd = false
        setTimeout(() => {
          this.doAddCart(this.bookId)
        }, 1000)
      }
    },
    doAddCart(bookId) {
      // if (!this.userCart) {
      //   this.$notify.error({
      //     title: '失败',
      //     message: '添加失败，请稍后重试'
      //   })
      //   return
      // }
      if (this.isLogin) {
        // 判断用户是已经添加过这个商品，
        let isExit = false
        if (!this.userCart) {
          // 购物车为空，直接添加
          this.addCartDirect(bookId)
          return
        } else {
          this.userCart.forEach((item) => {
            // console.log('item:' + item.bookId + ' ' + 'book:' + bookId)
            // eslint-disable-next-line eqeqeq
            if (item.bookId == bookId) {
              isExit = true
            }
          })
        }
        // console.log(isExit)
        // 如果添加过这个商品，则直接在本地修改商品数量，不能超过3
        if (isExit) {
          // console.log('进来了')
          const tempUserCart = this.userCart
          let donotAdd = false
          tempUserCart.forEach(element => {
            // eslint-disable-next-line eqeqeq
            if (element.bookId == bookId) {
              // console.log('num' + element.num)
              if (element.num < 3) {
                element.num = element.num + 1
              } else {
                // 当前数量已经达到三个了，不能添加了
                // console.log('xxxxx')
                this.$notify.error({
                  title: '失败',
                  message: '当前商品最多添加3个'
                })
                this.canAdd = true
                donotAdd = true
              }
            }
          })
          if (donotAdd) {
            return
          }
          this.$store.commit('cart/SET_USERCART', tempUserCart)
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success'
          })
          this.canAdd = true
          return
        } else {
          // 如果没有添加过这个商品，则添加商品到数据库，再次添加也只在本地修改
          const obj = {
            userId: this.userDetail.id,
            bookId,
            num: 1
          }
          this.$store.dispatch('cart/addCart', obj).then(res => {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success'
            })
            this.canAdd = true
            return
          })
        }
      } else {
        // 用户未登陆,提示用户登陆
        this.$notify({
          title: '警告',
          message: '请登陆后执行操作',
          type: 'warning'
        })
        this.canAdd = true
      }
    },
    addCartDirect(bookId) {
      const obj = {
        userId: this.userDetail.id,
        bookId,
        num: 1
      }
      this.$store.dispatch('cart/addCart', obj).then(res => {
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success'
        })
        this.canAdd = true
        return
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.book-detail-container {
  .book-title {
    // font-size: 20px;
    margin: 20px 0;
  }
  .el-row {
    color: #666 !important;
    font-weight: 400;
    .book-img {
      .block {
        width: 100%;
      }
    }
    .book-msg {
      .book-prop {
        margin-bottom: 20px;
      }
    }
    .book-category-operation-div {
      .category-detail {
        .each-category {
          margin-bottom: 10px;
        }
      }
      .div2 {
        margin-top: 20px;
      }
    }
  }
}
</style>
